<template>
        <div class="metrics-grid">
          <!-- Row 1: Goals -->
          <el-card class="metric-card">
            <div class="metric-content">
              <div class="icon-container blue">
                <i class="el-icon-office-building"></i>
              </div>
              <div class="metric-info">
                <div class="metric-title">公司目标</div>
                <div class="metric-value">0</div>
              </div>
            </div>
          </el-card>
  
          <el-card class="metric-card">
            <div class="metric-content">
              <div class="icon-container green">
                <i class="el-icon-user-solid"></i>
              </div>
              <div class="metric-info">
                <div class="metric-title">部门目标</div>
                <div class="metric-value">0</div>
              </div>
            </div>
          </el-card>
  
          <el-card class="metric-card">
            <div class="metric-content">
              <div class="icon-container purple">
                <i class="el-icon-user"></i>
              </div>
              <div class="metric-info">
                <div class="metric-title">个人目标</div>
                <div class="metric-value">0</div>
              </div>
            </div>
          </el-card>
  
          <!-- Row 2: Risk Metrics -->
          <el-card class="metric-card">
            <div class="metric-content">
              <div class="icon-container red">
                <i class="el-icon-office-building"></i>
              </div>
              <div class="metric-info">
                <div class="metric-title">公司风险目标</div>
                <div class="metric-value">0</div>
              </div>
            </div>
          </el-card>
  
          <el-card class="metric-card">
            <div class="metric-content">
              <div class="icon-container red">
                <i class="el-icon-user-solid"></i>
              </div>
              <div class="metric-info">
                <div class="metric-title">部门风险目标</div>
                <div class="metric-value">0</div>
              </div>
            </div>
          </el-card>
  
          <el-card class="metric-card">
            <div class="metric-content">
              <div class="icon-container red">
                <i class="el-icon-user"></i>
              </div>
              <div class="metric-info">
                <div class="metric-title">个人风险目标</div>
                <div class="metric-value">0</div>
              </div>
            </div>
          </el-card>
  
          <!-- Row 3: Progress Circles -->
          <el-card class="metric-card">
            <div class="progress-content">
              <el-progress type="circle" :percentage="0" :width="120">
                <template #default="{ percentage }">
                  <span class="progress-label">
                    {{ percentage }}%
                    <div class="progress-title">公司目标完成率</div>
                  </span>
                </template>
              </el-progress>
            </div>
          </el-card>
  
          <el-card class="metric-card">
            <div class="progress-content">
              <el-progress type="circle" :percentage="0" :width="120">
                <template #default="{ percentage }">
                  <span class="progress-label">
                    {{ percentage }}%
                    <div class="progress-title">部门目标完成率</div>
                  </span>
                </template>
              </el-progress>
            </div>
          </el-card>
  
          <el-card class="metric-card">
            <div class="progress-content">
              <el-progress type="circle" :percentage="0" :width="120">
                <template #default="{ percentage }">
                  <span class="progress-label">
                    {{ percentage }}%
                    <div class="progress-title">个人目标完成率</div>
                  </span>
                </template>
              </el-progress>
            </div>
          </el-card>
        </div>
  </template>
  
  <script>
  export default {
    name: 'GoalsDashboard',
    data() {
      return {
        activeTab: 'overview',
        selectedCompany: '1',
        selectedYear: '2024',
      }
    }
  }
  </script>
  
  <style scoped>
  .dashboard-container {
    display: flex;
    min-height: 100vh;
    background-color: #f7f8fa;
  }
  
  .sidebar {
    width: 200px;
    background-color: #f7f8fa;
    border-right: 1px solid #ebeef5;
  }
  
  .sidebar-menu {
    border-right: none;
  }
  
  .main-content {
    flex: 1;
    padding: 24px;
  }
  
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
  }
  
  .header-right {
    display: flex;
    gap: 12px;
  }
  
  .metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  
  .metric-card {
    border-radius: 8px;
  }
  
  .metric-content {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  
  .icon-container {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .icon-container i {
    font-size: 24px;
    color: white;
  }
  
  .blue {
    background-color: #409EFF;
  }
  
  .green {
    background-color: #67C23A;
  }
  
  .purple {
    background-color: #909399;
  }
  
  .red {
    background-color: #F56C6C;
  }
  
  .metric-info {
    flex: 1;
  }
  
  .metric-title {
    font-size: 14px;
    color: #606266;
    margin-bottom: 4px;
  }
  
  .metric-value {
    font-size: 24px;
    font-weight: bold;
    color: #303133;
  }
  
  .progress-content {
    display: flex;
    justify-content: center;
    padding: 24px 0;
  }
  
  .progress-label {
    font-size: 20px;
    font-weight: bold;
  }
  
  .progress-title {
    font-size: 14px;
    color: #909399;
    font-weight: normal;
    margin-top: 8px;
  }
  
  :deep(.el-select) {
    width: 140px;
  }
  
  :deep(.el-tabs__nav-wrap::after) {
    height: 1px;
  }
  
  :deep(.el-progress__text) {
    font-size: 20px !important;
  }
  </style>